<template>
  <div class="jiameng-main">
      <a href="" class="jiameng-top">
          <img src="../../static/img/jiameng-top.png" alt="">
      </a>
      <div class="index web-inner">
          <div class="index-left">
              <commonForm></commonForm>
              <div class="msg">
                  <div class="title">
                      <span class="title-left">加盟需求一覽</span>
                  </div>
                  <div class="msg-main">
                      <div v-for="item in top20" class="msg-main-item">
                          <div class="msg-main-item-title">
                              {{item.name}}先生/女士 詢問：茶飲
                              <!--<span class="time">2019-01-01</span>-->
                          </div>
                          <div class="msg-main-item-item">
                              <div class="left">
                                  <div class="left-top">
                                      <div class="left-top-left">
                                          <span>開店地點：{{item.location}}</span>
                                          <span>開店時間：{{item.expected_time}}</span>
                                      </div>
                                      <div class="left-top-right">
                                          <span>是否有店：{{item.Shop_property}}</span>
                                          <span>聯繫時間：{{item.contact_time}}</span>
                                      </div>
                                  </div>
                                  <div class="left-bottom">
                                      備註說明：{{item.desc}}
                                  </div>
                              </div>
                              <div class="right">
                                  <div class="right-top">加盟預算</div>
                                  <div class="right-center">{{item.budget}}</div>
                                  <div class="right-bottom"><a href="#/kandeng">我要聯絡他</a></div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="index-right">
              <div class="xuqiu">
                  <indexXuqiu></indexXuqiu>
              </div>
              <div v-for="(item,index) in h3" class="yuanfen fangda">
                  <a :href="item.link">
                      <img :src="imgUrl+item.image" alt="">
                  </a>
              </div>
              <div class="baodao">
                  <indexBaodao></indexBaodao>
              </div>
              <!--<div class="news">-->
                  <!--<indexNews></indexNews>-->
              <!--</div>-->
          </div>
      </div>
  </div>
</template>

<script>
    import indexXuqiu from "../components/index-xuqiu"
    import indexBaodao from "../components/index-baodao"
    import indexNews from "../components/index-news"
    import qs from 'qs';
    import commonForm from "../components/common-form-jiameng"

export default {
  name: 'home',
    components:{
        indexXuqiu,
        indexBaodao,
        indexNews,
        commonForm
    },
  data() {
      var checkPhone = (rule, value, callback) => {
          let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
          if(mobilePatternTW.test(value)){
              callback();
          }else{
              callback(new Error('請輸入正確的電話號碼'));
          }
      };
      var checkLoc = (rule, value, callback) => {
          if(this.loca==='') {
              callback(new Error('必填'));
          }else if(this.loca==="0"){
              callback();
          } else{
              if(this.ruleForm.location===''){
                  callback(new Error('必填'));
              }else{
                  callback();
              }
          }

      };
      return {
        meishi:[
            {
                title:"美食品牌",
                images:[
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    }
                ]
            },
            {
                title:"中式餐點",
                images:[
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=4210061291,2513300371&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=4210061291,2513300371&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=4210061291,2513300371&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    }
                ]
            },
            {
                title:"異國美食",
                images:[
                    {
                        image:"http://img3.imgtn.bdimg.com/it/u=3255824092,1270088157&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    }
                ]
            },
            {
                title:"早午餐",
                images:[
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    }
                ]
            }
        ],
        dianxin:[
            {
                title:"冰品點心",
                images:[
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    }
                ]
            },
            {
                title:"咖啡甜點",
                images:[
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=4210061291,2513300371&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=4210061291,2513300371&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=4210061291,2513300371&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    }
                ]
            },
            {
                title:"冰品飲料",
                images:[
                    {
                        image:"http://img3.imgtn.bdimg.com/it/u=3255824092,1270088157&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    },
                    {
                        image:"http://img2.imgtn.bdimg.com/it/u=185920297,599833789&fm=26&gp=0.jpg",
                        text:123123132
                    }
                ]
            }
        ],
          ruleForm: {
              brand_category_id: [],
              name: '',
              m_phone: '',
              line_id:'',
              weichat_id:'',
              location:'',
              Shop_property:'',
              budget:"",
              expected_time:'',
              contact_time:'',
              desc:'',
              open_info:false,
              phrase:"",
          },
          rules: {
              brand_category_id: [
                  { required: true, message: '必填', trigger: 'change' },
              ],
              name: [
                  { required: true, message: '必填', trigger: 'blur' }
              ],
              m_phone: [
                  { required: true,message: '必填',validator:checkPhone, trigger: 'blur' }
              ],
              location: [
                  { required: true, validator:checkLoc,trigger: 'change' }
              ],
              Shop_property: [
                  { required: true,message: '必填', trigger: 'change' }
              ],
              budget: [
                  { required: true, message: '必填',trigger: 'change' }
              ],
              expected_time: [
                  { required: true, message: '必填',trigger: 'change' }
              ],
              contact_time: [
                  { required: true,message: '必填', trigger: 'change' }
              ],
              phrase: [
                  { required: true,message: '必填', trigger: 'blur' }
              ],
          },
          type:[],
          options: [
              {
                  label: '10萬以下'
              },
              {
                  label: '10萬~20萬'
              }, {
                  label: '20萬~50萬'
              }, {
                  label: '50萬~100萬'
              }, {
                  label: '100萬以上'
              }
          ],
          imgUrl1:"/webroot/session.php",
          loca:"",
          top20:[],
          h1:"",
          h2:"",
          h3:[],
          imgList:[],
          bottomImg:"",
      }
  },
    mounted() {
        this.getBrandCategory()
        this.getApplyFranTop20()
        this.getImg()
    },
    methods: {
        getImg() {
            this.$http.post(this.API.get_banner_home).then((res) => {
                let $this = this;
            console.log(res);
            if(res.status ===200 && res.data.length>0){
                res.data.forEach((item) => {
                    if(item.location==="h1"){
                    this.h1=item;
                }
                if(item.location==="h2"){
                    this.h2=item;
                }
                if(item.location==="h3"){
                    this.h3.push(item);
                }
                if(item.location==="h0"){
                    this.imgList.push(item);
                }
                if(item.location==="h4"){
                    this.bottomImg=item;
                }
                console.log(this.bottomImg);
            })
            }
        })
        },
        changeType() {
            if(this.loca ==='0'){
                this.ruleForm.location = "尚未確定";
            }else{
                this.ruleForm.location = "";
            }
        },
        submitForm(formName) {
            let obj= [
                {
                    name:"brand_category_id",
                    text:"請選擇尋找類型!"
                },
                {
                    name:"name",
                    text:"請輸入姓名!"
                },
                {
                    name:"m_phone",
                    text:"請輸入手機!"
                },
                {
                    name:"location",
                    text:"請選擇地點!"
                },
                {
                    name:"Shop_property",
                    text:"請選擇店面!"
                },
                {
                    name:"budget",
                    text:"請輸入創業總預算!"
                },
                {
                    name:"expected_time",
                    text:"請選擇希望開店時間!"
                },
                {
                    name:"contact_time",
                    text:"請選擇可聯絡時間!"
                }
            ]
            let temp = {};
            for(let i=0;i<obj.length;i++){
                let tmp = obj[i];
                if(typeof this.ruleForm[tmp.name]==='object'){
                    if(this.ruleForm[tmp.name].length<=0){
                        temp = tmp;
                        this.$alert(temp.text, '提示', {
                            confirmButtonText: '确定',
                        });
                        return false
                    }
                }else if(typeof this.ruleForm[tmp.name]==='boolean'){
                    if(this.ruleForm[tmp.name]===false){
                        temp = tmp;
                        this.$alert(temp.text, '提示', {
                            confirmButtonText: '确定',
                        });
                        return false
                    }
                }else{
                    if(this.ruleForm[tmp.name]===""){
                        temp = tmp;
                        this.$alert(temp.text, '提示', {
                            confirmButtonText: '确定',
                        });
                        return false
                    }
                }
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.sendData()
                } else {
                    console.log('error submit!!');
            return false;
        }
        });
        },
        refresh() {
            this.imgUrl1="/webroot/session.php?"+new Date().getTime()
        },
        sendData() {
            let data = Object.assign({},this.ruleForm);
            data.brand_category_id = data.brand_category_id.join(",");
            this.$http({
                method:"post",
                url:this.API.apply_fran,
                data:qs.stringify(data),
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                withCredentials:true
            }).then((res) => {
                this.refresh()
              if(res.data[0].code==="101"){
                this.resetForm("ruleForm");
                this.$alert(this.formTips, '成功', {
                  confirmButtonText: '确定',
                });
              }else{
                this.$alert(res.data[1].desc, '提示', {
                  confirmButtonText: '确定',
                });
              }
        })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getBrandCategory() {
            this.$http.post(this.API.get_brand_category).then((res) => {
                let $this = this;
            if(res.status ===200 && res.data.length>0){
                this.type = res.data;
            }
        })
        },
        getApplyFranTop20() {
            this.$http.post(this.API.get_apply_fran_top20).then((res) => {
            if(res.status ===200 && res.data.length>0){
                this.top20=res.data;
            }
        })
        },
    }
}
</script>
<style lang="less" scoped>
  @import "../style/base";
  .jiameng-top{
      margin-top: 40px;
      display: inline-block;
      width: 100%;
      img {
          width: 100%;
      }

  }
  .index{
    margin: 0 auto;
    padding:  40px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .index-left{
      width: 70%;
        margin-right: 0.5%;
        .title{
            height: 48px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 4px solid #2e436d;
            margin-bottom: 15px;
            .title-left{
                padding:  0 18px;
                height: 48px;
                line-height: 48px;
                font-size: 24px;
                background-color:#2e436d;
                color: #ffffff;
            }
        }
        .msg-main{
            background-color: #f9f9f9;
            padding: 10px;
            color: #666666;
            .msg-main-item{
                background-color: #ffffff;
                border: 1px solid #e6e6e6;
                padding: 10px;
                margin-bottom: 10px;
                &:last-child{
                    margin-bottom: 0;
                }
                .msg-main-item-title{
                    font-size: 14px;
                    color: red;
                    margin-bottom: 5px;
                    .time{
                        font-size: 12px;
                        line-height: 12px;
                        padding: 5px;
                        border: 1px solid #e6e6e6;
                        color: #e6e6e6;
                    }
                }
                .msg-main-item-item{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .left{
                        flex: 3;
                        display: flex;
                        flex-direction: column;
                        font-size: 12px;
                        line-height: 22px;
                        .left-top{
                            display: flex;
                            flex-direction: row;
                            .left-top-left,.left-top-right{
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                            }

                        }

                    }
                    .right{
                        flex:1;
                        .right-center{
                            font-size: 22px;
                            color: orange;
                            line-height: 30px;
                        }
                        .right-bottom{
                            cursor: pointer;
                            border: 1px solid #e6e6e6;
                            font-size: 14px;
                            display: inline-block;
                            padding: 5px;
                        }

                    }
                }
            }
        }
    }
    .index-right{
      width:29.5%;
        .big-guanggao{
            height: 386px;
            width: 100%;
            margin-bottom: 42px;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .xuqiu{
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 45px;
        }
        .guanggao{
            width: 100%;
            height:100px;
            margin-bottom: 45px;
            cursor: pointer;
            img{
                width: 100%;
            }
        }
        .yuanfen{
            width: 100%;
            margin-bottom: 45px;
            cursor: pointer;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
  }
</style>
